import { AbstractCanvas } from './AbstractCanvas'

export interface spanCanvasConfig {
  span: number
}

export default class SpanCanvas extends AbstractCanvas {
  constructor(
    private canvas: HTMLCanvasElement,
    ctx: CanvasRenderingContext2D,
    private width: number,
    private height: number,
    private margin: number,
    private lst_span: spanCanvasConfig[],
  ) {
    super(ctx)
    this.init()
  }

  // 初始化
  private init() {
    this.canvas.width = this.width
    this.canvas.height = this.height
    this.ctx.translate(this.margin, this.height - this.margin)
  }

  // 绘制
  public draw() {
    this.ctx.translate(0, 10)

    let leiSpan = 0
    for (const span of this.lst_span) {
      // 绘制横线
      const p1: [number, number] = [leiSpan / 5, 0]
      const p2: [number, number] = [leiSpan / 5 + span.span / 5, 0]
      super.drawline(p1, p2, 1.5, '#7f8c8d')

      // 绘制竖线
      if (this.lst_span.indexOf(span) === 0) super.drawline([0, -3], [0, 3], 1.5, '#7f8c8d')
      super.drawline([leiSpan / 5 + span.span / 5, -3], [leiSpan / 5 + span.span / 5, 3], 1.5, '#7f8c8d')

      // 绘制文字
      const txt = span.span
      const cen = leiSpan / 2 / 5 + (leiSpan + span.span) / 2 / 5
      super.drawText(txt.toString(), [cen, 10], '#7f8c8d')
      leiSpan += span.span
    }
  }
}
